<template>
  <div>
    <div class="container">
      <textarea v-model="text" class="input-area"></textarea>
      <div class="output-area" v-html="renderMdText(text)"></div>
    </div>
  </div>
</template>

<script>
import MarkdownIt from "markdown-it";
// import MarkdownItHighlightjs from "markdown-it-highlightjs";
// import "highlight.js/styles/a11y-dark.css";
import katex from 'katex'
import 'katex/dist/katex.min.css';

export default {
  data() {
    return {
      text: ``,
      markdownRender: new MarkdownIt({
        html: true,
        linkify: true,
        typographer: true,
      }),//.use(MarkdownItHighlightjs)
    };
  },
  // updated() {
  //   let that = this;
  //   this.$nextTick(() => {
  //     // 获取页面上的pre和code标签
  //     const codeBlocks = document.querySelectorAll("pre code");
  //     codeBlocks.forEach((block) => {
  //       let newDiv;
  //       // 获取code标签
  //       const preElement = block;
  //       // 获取code标签的父元素
  //       const parentElement = preElement.parentNode;
  //       // 获取parentElement下的第一个div元素
  //       const firstDiv = parentElement.querySelector("div");
  //       // 检查是否找到了div元素
  //       if (!firstDiv) {
  //         // 创建一个div
  //         newDiv = document.createElement("div");
  //         // 给div添加文字内容
  //         newDiv.innerText = "复制代码";
  //         // 给div设置class样式
  //         newDiv.setAttribute("class", "copyButton");
  //         // 把div插入到code标签前面
  //         parentElement.insertBefore(newDiv, preElement);
  //         // 给div添加点击事件
  //         newDiv.onclick = function () {
  //           const textArea = document.createElement("textarea");
  //           textArea.value = preElement.innerText;
  //           document.body.appendChild(textArea);
  //           textArea.select();
  //           document.execCommand("copy");
  //           document.body.removeChild(textArea);
  //           that.$message.success('复制成功');
  //         };
  //       }
  //     });
  //   });
  // },
  methods: {
    renderMdText(text) {
      // markdown转html
      text = this.markdownRender.render(text);
      text = this.renderMath(text);
      return text;
    },
    // markdown转latex
    renderMath(html) {
      // 匹配 $$...$$, \[...\], \(...\), and $...$
      const regex =
        // /(\$\$([\s\S]+?)\$\$)|(\[([\s\S]+?)\])|(\(([\s\S]+?)\))|(\$([^\$]+?)\$)/g;
        /(\$\$([\s\S]+?)\$\$)|(\[([\s\S]+?)\])|(\$([^\$]+?)\$)/g;
      return html.replace(regex, (match, p1, p2, p3, p4, p5, p6, p7, p8) => {
        let latex;
        if (p2) {
          // $$...$$
          latex = p2;
        } else if (p4) {
          // \[...\]
          latex = p4;
        } else if (p6) {
          // \(...\)
          latex = p6;
        } else if (p8) {
          // $...$
          latex = p8;
        }
        if (latex) {
          try {
            return `${katex.renderToString(latex, {
              throwOnError: false,
            })}`;
          } catch (e) {
            console.error("KaTeX rendering error:", e);
            return match;
          }
        }
        return match;
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.input-area {
  width: 45%;
  height: 80vh;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.output-area {
  width: 45%;
  height: 80vh;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow-y: scroll;
}

.katex {
  font-size: 1.2em;
  line-height: 2;
}
</style>

